// 通过drag把文件拖拽到浏览器的默认事件覆盖
// 文件离开
document.οndragleave = function (e) {
    e.preventDefault();// 禁止浏览器默认行为，浏览器默认会直接打开显示
    console.info("文件离开执行了！！");
};
// 鼠标松开文件
document.οndrοp = function (e) {
    e.preventDefault();// 禁止浏览器默认行为，浏览器默认会直接打开显示
    console.info("松开以后执行了！");
};
// 鼠标移动文件
document.οndragοver = function (e) {
    e.preventDefault();// 禁止浏览器默认行为，浏览器默认会直接打开显示
    console.info("文件移动以后执行了！");
};

function uploadMyFile() {
    var url = "http://127.0.0.1:8080/data";
    // 获取上传文件的div
    var uploadArea = document.getElementById("upload-my-data");
    // 通过HTML5拖拽事件，ondrop，然后通过拖动区域监听浏览器的drop事件达到文件上传的目的
    uploadArea.addEventListener("drop", function (event) {
        // 禁止浏览器默认行为，浏览器默认会直接打开显示
        event.preventDefault();
        if (event.type === 'drop') {
            var data = new FormData();
            var files = event.dataTransfer.files; // 获取文件信息，同File对象相同
            console.log(
                `文件名称:${files[0].name},文件类型:${files[0].type},文件大小:${files[0].size} bytes`
            )
            // 如果有多个文件上传，默认处理第一个文件
            data.append("file", files[0]);
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true); // url表示文件上传服务器的地址
            //上传进度回调
            xhr.upload.οnprοgress=function(e) {

                if (e.lengthComputable) {
                    document.getElementById("text").innerHTML = (e.loaded / e.total * 100) + "%";
                }

            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) { // 状态为4表示操作结束
                    console.log(xhr.responseText);
                    if (xhr.status === 200){
                        console.log("success");
                    }
                }
            }
            xhr.onload=function(e) {
                isUpload = true;//上传完成可继续拖拽上传
            }
        }
        xhr.send(data);
    });
    uploadArea.addEventListener('dragenter', function (event) {
        //禁止浏览器默认行为，浏览器默认会直接打开显示
        event.preventDefault();
    });
    uploadArea.addEventListener('dragover', function (event) {
        //禁止浏览器默认行为，浏览器默认会直接打开显示
        event.preventDefault();
    });
}

//直接调用
uploadMyFile();
